<script setup>
import { ref, reactive, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from "vue"
import {addOrEditDialog} from '@/api/ShopDatabase/goodsSetting'
import getRules from "@/validUtils";
// dialog弹框组件


const handleClose = () => {
    cancel()
}
const form = ref({
    diagnosisValue:''
})

const props = defineProps({
    dialogAddName:{
        type:Boolean,
        default:false
    },
    backForm:{
        type:Object,
        default:() => ({})
    },
    dialogTitle:{
        type:String,
        default:''
    },

})

const init = () => {
    if(props?.backForm?.id){
        form.value.diagnosisValue = props.backForm?.diagnosisValue || ''
    }
    console.log(form.value.diagnosisValue,'form.value.diagnosisValue');
}
init()

// 定义方法
const emit = defineEmits(['changeAddname'])
const backFile = (val) => {
    console.log(val,'val');
}

const cancel = () => {
    emit('changeAddname',false)
    form.value = {
        diagnosisValue:''
    }
}

// 提交方法
const formDialog = ref(null)
const submitEvent = (parent) => {
    formDialog.value.validate(async(valid) => {
        if(valid){
            try {
        let data = {
      ...props.backForm,
      ...form.value  
        }
        const res = await addOrEditDialog(data)
        console.log(res,'res');
        ElMessage({
            type:'success',
            message:'新增成功！'
        })
            cancel()
            emit('changeAddname','clear')
        } catch (error) {
            
        }finally{

        }
   
        }else{

        }
    })
  
}
//组件挂载到节点上之前执行的函数
onBeforeMount(()=>{})

//组件挂载完成后执行的函数
onMounted(()=>{
   
})

//组件更新之前执行的函数
onBeforeUpdate(()=>{})

//组件更新完成之后执行的函数
onUpdated(()=>{})

//组件卸载之前执行的函数
onBeforeUnmount(()=>{})

//组件卸载完成后执行的函数
onUnmounted(()=>{})

</script>

<template>
  <div class="">
    <el-dialog
            v-model="props.dialogAddName"
            :title="dialogTitle"
            width="380px"
            :before-close="handleClose"
            align-center
            :close-on-click-modal=false
        >
           <div class="dialog-main">
             
              <el-form :model="form" label-width="82px" ref="formDialog">
                <el-form-item label="诊断名称" prop="diagnosisValue" :rules="getRules('diagnosisValue','诊断名称')">
                    <el-input v-model="form.diagnosisValue" maxlength="20" show-word-limit/>
                </el-form-item>
            </el-form>
            </div>
                <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="submitEvent($parent)">
                    确定
                    </el-button>
                </span>
                </template>
            </el-dialog>
  </div>
</template>

<style lang="less" scoped>
    .dialog-main{
        .title-show {
            margin:6px 0 16px 0;
            padding: 12px;
            width: 468px;
            height: 66px; 
            background: rgba(52, 128, 255, 8%);
            // opacity: 8%;
            box-sizing: border-box;
            .buss-pic{
              
            }
            .door-info{
                margin-bottom: 12px;
                color: #3480ff;
                font-family: "PingFang SC";
                font-size: 16px;
                font-style: normal;
                font-weight: 600;
                line-height: 16px;
            }
        }
        .el-form-item{
            margin-bottom: 16px;
            :deep(.el-input) {
                width: 260px;
            }
          
         }
    }
    :deep(.el-dialog__body){
        padding: 0px;
        padding-top: 5px;
    }
   :deep(.el-dialog__footer) {
    padding-top: 0px !important;
   }
</style>
